<template>
	<view class="loginBg" :style="{'height':pageH+'px'}">
		<image mode="widthFix" src="../../static/bg.png"></image>
		<view class="topFixed">
			<statusBar></statusBar>
			<view class="ttBarBox">
				<view class="leftBox" @tap="pBack">
					<text class="leftIcon iconfont icon-back"></text>
				</view>

				<!-- <view class="rightBox" data-url="telRegister" @tap="toPage">
					<text class="rightText">立即注册</text>
					<text class="rightIcon iconfont icon-right"></text>
				</view> -->
			</view>
		</view>
		<view class="loginBox">
			<view class="loginTab">
				<view class="tabBox">
					<text :class="['tabItem',isTelLogin?'active':'']" @tap="toggleLoginType">手机号快捷登录</text>
					<text :class="['tabItem',isTelLogin?'':'active']" @tap="toggleLoginType">账号密码登录</text>
				</view>
				<view class="contentBox">
					<view class="tabContent">
						<block v-if="isTelLogin">
							<view class="row">
								<text>+86</text>
								<text class="iconfont icon-unfold"></text>
								<input class="talInput" type="number" placeholder="电话号码" v-model="tel" :adjust-position="true" maxlength="11" />
								<text :class="['getCode',isSendMsg?'isSend':'']" v-text="sendText" @tap="getMsgCode"></text>
							</view>
							<view class="row">
								<input class="msgCode" type="number" placeholder="请输入验证码" v-model="msgCode" maxlength="6" />
							</view>
							<text class="tishi">未注册的手机号将自动创建为找培训账号</text>
						</block>
						<block v-else>
							<view class="row">
								<input class="msgCode" type="text" placeholder="请输用户名" v-model="userName" :adjust-position="true" maxlength="20"/>
							</view>
							<view class="row">
								<input class="msgCode" type="text" password="true" placeholder="请输入密码" v-model="userPass" maxlength="16" />
							</view>
							<text class="tishi forgetPass" data-url="getPass" @tap="toPage">忘记密码？</text>
						</block>




						<button class="loginBtn" @tap="login">登录</button>
					</view>
				</view>
			</view>
		</view>
		<view class="otherBox">
			<view class="otherLogin" v-if="initInfo.approve!=1">
				<image v-if="isIstWx" mode="widthFix" src="../../static/wechat.png" @tap="thirdLogin('weixin')"></image>
				<image v-if="isIstQQ" mode="widthFix" src="../../static/qq.png" @tap="thirdLogin('qq')"></image>
				<image mode="widthFix" src="../../static/weibo.png" @tap="thirdLogin('sinaweibo')"></image>
				<image v-if="iosNum>=13" mode="widthFix" src="../../static/apple.png" @tap="thirdLogin('apple')"></image>
			</view>
			<view class="xieyiBox">
				<text>登录/注册代表您已同意</text>
				<text class="zz" @tap="toPage" :data-url="initInfo.policy">《找培训用户协议》</text>
				<text class="zz" @tap="toPage" :data-url="initInfo.privacy">《隐私政策》</text>
			</view>

		</view>
	</view>
</template>

<script>
	import statusBar from "../../components/statusBar/statusBar.vue";
	import COMM from "@/common/common.js";
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";
	export default {
		computed: {
			...mapState({
				initInfo: state => state.sys.initInfo,
				userInfo: state => state.user.userInfo,
				pushId:state=>state.push.pushId,
				imei:state=>state.push.imei
			})

		},
		data() {
			return {
				pageH:uni.getSystemInfoSync().screenHeight,
				isTelLogin: true,
				tel: '',
				msgCode: '',
				userName: '',
				userPass: '',
				isGetMsg: false,
				sendText: '获取验证码',
				isSendMsg: false,
				thirdList: [],
				cfm: {},
				iosNum: 0,
				isIstWx: false,
				isIstQQ: false,
			};
		},
		methods: {

			// 切换登录类型
			toggleLoginType() {
				this.isTelLogin = !this.isTelLogin

			},
			checkInstall() {
				// #ifdef APP-PLUS
				if (plus.runtime.isApplicationExist({
						pname: 'com.tencent.mm',
						action: 'weixin://'
					})) {
					this.isIstWx = true;
				}
				if (plus.runtime.isApplicationExist({
						pname: 'com.tencent.mobileqq',
						action: 'mqq://'
					})) {
					this.isIstQQ = true;
				}
				// #endif
			},
			// 手机号+验证码登录
			loginByTel() {
				let rgx = /^1[3456789]\d{9}$/;
				if (!this.tel) {
					uni.showToast({
						title: '请输入手机号码',
						icon: 'none'
					});
				} else if (!rgx.test(this.tel)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
				} else if (!this.isGetMsg) {
					uni.showToast({
						title: '请先获取短信验证码',
						icon: 'none'
					});
				} else if (!this.msgCode) {
					uni.showToast({
						title: '请输入短信验证码',
						icon: 'none'
					});
				} else {
					// 验证登录流程
					this.$store.dispatch("apiUserLogin", {
							username: this.tel,
							code: this.msgCode
						})
						.then(res => {
							console.log(res);
							setTimeout(() => {
								this.$store.dispatch("timLogin", res.data.data.imid).then(timRes => {})
								// #ifdef APP-PLUS
								if(this.pushId){
									this.$store.dispatch("eidtUserInfo",{
										userId:res.data.data.userId,
										pushId:this.pushId,
										imei:this.imei
									})
								}
								// #endif
							}, 500)
							this.loginJump();
						})
				}
			},
			// 用户名+密码登录
			loginByName() {
				if (!this.userName) {
					uni.showToast({
						title: '请输入用户名',
						icon: 'none'
					});
				} else if (!this.userPass) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					});
				} else {

					// 在这里写用户名登录接口处理
					this.$store.dispatch("apiUserLogin", {
							username: this.userName,
							password: this.userPass
						})
						.then(res => {
							console.log(res);
							setTimeout(() => {
								this.$store.dispatch("timLogin", res.data.data.imid).then(timRes => {})
								// #ifdef APP-PLUS
								if(this.pushId){
									this.$store.dispatch("eidtUserInfo",{
										userId:res.data.data.userId,
										pushId:this.pushId,
										imei:this.imei
									})
								}
								// #endif
							}, 1000)
							this.loginJump();

						})
				}
			},
			login() {
				if (this.isTelLogin) {
					this.loginByTel()
				} else {
					this.loginByName()
				}
			},
			// 获取短信验证码
			getMsgCode() {
				if (!this.isSendMsg) {
					let rgx = /^1[3456789]\d{9}$/;
					if (!this.tel) {
						uni.showToast({
							title: '请输入手机号码',
							icon: 'none'
						});
					} else if (!rgx.test(this.tel)) {
						uni.showToast({
							title: '请输入正确的手机号',
							icon: 'none'
						});
					} else {
						this.isGetMsg = true; //修改状态
						let t = 60;
						this.sendText = t + "秒"
						this.isSendMsg = true;
						this.$store.dispatch("apiSendMsgCode", {
							phone: this.tel,
							type: '2',
						}).then(res => {
							const itval = setInterval(() => {
								t--;
								if (t < 1) {
									t = 60;
									this.sendText = "获取验证码"
									this.isSendMsg = false;
									clearInterval(itval);
								} else {
									this.isSendMsg = true;
									this.sendText = t + "秒"
								}
							}, 1000)
						})
					}
				} else {
					uni.showToast({
						title: '发送的间隔太短啦，请稍后再试',
						icon: 'none'
					});
				}
			},
			checkIOS() {
				if (uni.getSystemInfoSync().platform == 'ios') {
					this.iosNum = parseInt(uni.getSystemInfoSync().system.toString().split('.')[0]);
				} else {
					this.iosNum == 0
				}
			},
			// 第三方登录
			getLoginProvider() {
				this.$store.dispatch("uniGetLoginProvider")
					.then(res => {
						console.log(res);
						this.thirdList = res.provider
					})
			},
			thirdLogin(e) {
				e = e.toString();

				if (e == 'weixin') {
					this.$store.dispatch("loginByWexin")
						.then(res => {
							this.$store.dispatch("apiThirdLogin", {
									openId: res.userInfo.unionId,
									loginType: 1
								})
								.then(apiRes => {

									if (apiRes.data.code == 1) {
										setTimeout(() => {
											this.$store.dispatch("timLogin", apiRes.data.data.imid).then(timRes => {})
										}, 1000)
										this.loginJump();

									}
								}).catch(err => {
									if (err.data.code == 3) {
										this.toPage({
											url: 'bindTel',
											openId: res.userInfo.unionId,
											thirdType: 1,
											thirdPic: res.userInfo.avatarUrl,
										})
									}
								})

						})
				} else if (e == 'qq') {
					this.$store.dispatch("loginByQQ")
						.then(res => {
							console.log(res);
							this.$store.dispatch("apiThirdLogin", {
									openId: res.userInfo.openId,
									loginType: 2
								})
								.then(apiRes => {

									if (apiRes.data.code == 1) {
										setTimeout(() => {
											this.$store.dispatch("timLogin", apiRes.data.data.imid).then(timRes => {})
										}, 1000)
										this.loginJump();

									}
								}).catch(err => {
									if (err.data.code == 3) {
										this.toPage({
											url: 'bindTel',
											openId: res.userInfo.openId,
											thirdType: 2,
											thirdPic: res.userInfo.avatarUrl,
										})
									}
								})

						})

				} else if (e == 'sinaweibo') {
					this.$store.dispatch("loginByWeiBo")
						.then(res => {
							this.$store.dispatch("apiThirdLogin", {
									openId: res.userInfo.openid,
									loginType: 3
								})
								.then(apiRes => {

									if (apiRes.data.code == 1) {
										setTimeout(() => {
											this.$store.dispatch("timLogin", apiRes.data.data.imid).then(timRes => {})
										}, 1000)
										this.loginJump();

									}
								}).catch(err => {
									if (err.data.code == 3) {
										this.toPage({
											url: 'bindTel',
											openId: res.userInfo.openid,
											thirdType: 3,
											thirdPic: res.userInfo.avatarUrl,
										})
									}
								})
						})

				} else if (e == 'apple') {
					this.$store.dispatch("loginByApple").then(res => {
						this.$store.dispatch("apiThirdLogin", {
								openId: res.userInfo.openId,
								loginType: 4
							})
							.then(apiRes => {

								if (apiRes.data.code == 1) {
									setTimeout(() => {
										this.$store.dispatch("timLogin", apiRes.data.data.imid).then(timRes => {})
									}, 1000)
									this.loginJump();

								}
							}).catch(err => {
								if (err.data.code == 3) {
									this.toPage({
										url: 'bindTel',
										openId: res.userInfo.openId,
										thirdType: 4,
										thirdPic: '',
									})
								}
							})
					})
				}
			},
			loginJump() {
				if (this.cfm.to == "car") { //去购物车
					uni.redirectTo({
						url: "/pages/car/car"
					})
				} else if (this.cfm.to == 'addCar') { //添加商品到购物车
					this.$store.dispatch("apiAddGoodToCar", {
						userId: this.userInfo.userId,
						courseId: this.cfm.gid,
						num: 1
					}).then(res => {
						uni.navigateBack({
							delta: 1
						})
						setTimeout(() => {
							uni.showToast({
								title: '添加成功',
								icon: 'success'
							});
						}, 1500)

					})
				} else if (this.cfm.to == "confirmOrder") { //到提交订单页面
					if(this.cfm.isGroup){
						uni.redirectTo({
							url: "/pages/confirmOrder/confirmOrder?isGroup=1&acId="+this.cfm.acId
						})
					}else{
						uni.redirectTo({
							url: "/pages/confirmOrder/confirmOrder"
						})
					}
					
				} else {
					// this.toPage('index');
					uni.navigateBack({
						delta:1
					})
				}
			}
		},
		onLoad(cfm) {
			this.cfm = cfm;		
			this.getLoginProvider();
			this.checkIOS();
			this.checkInstall();
		}
	}
</script>

<style lang="less">
	page {
		height: 100%;
	}

	.loginBg {
		width: 100%;
		height: 100%;

		image {
			width: 100%;
		}

		.overMask {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 99;
		}
	}

	.topFixed {
		position: fixed;
		width: 100%;
		z-index: 999;
		height: 90upx;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0);
	}

	.ttBarBox {
		display: flex;
		align-items: center;
		width: 100%;
		height: 90upx;
		color: #FFFFFF;
		left: 0;
		position: relative;
		padding: 0 34upx;
		background-color: rgba(0, 0, 0, 0);

		.leftBox {
			display: flex;
			position: absolute;
			height: 100%;
			padding: 0 20upx;
			z-index: 999;
			align-items: center;
			top: 0;
			left: 0;
			line-height: 90upx;

			.leftIcon {
				font-size: 40upx;
				margin-right: 10upx;

			}
		}

		.rightBox {
			display: flex;
			position: absolute;
			height: 100%;
			padding: 0 20upx;
			z-index: 999;
			align-items: center;
			top: 0;
			right: 0;
			/* #ifdef MP */
			right: 27%;
			/* #endif */

			line-height: 70upx;

			.rightIcon {
				font-size: 24upx;

			}

			.rightText {
				font-size: 24upx;
				color: #ffffff;
			}
		}


	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: rgba(0, 0, 0, 0);
	}

	.loginBox {
		top: 22%;
		width: 100%;
		position: absolute;
		display: flex;
		justify-content: center;

		.loginTab {
			width: 80%;
			background-color: #ffffff;
			box-shadow: 0upx 4upx 42upx 0upx rgba(242, 192, 105, 0.5);
			border-radius: 21upx;
			padding: 54upx 36upx 80upx 36upx;
			display: flex;
			flex-direction: column;

			.tabBox {
				display: flex;
				align-items: center;
				justify-content: space-around;

				.tabItem {
					flex-grow: 0;
					flex-shrink: 0;
					text-align: center;
					display: inline-block;
					padding-bottom: 18upx;
					font-size: 30upx;
					font-weight: bold;
					color: #3b434d;
					border-bottom: 2px solid #FFFFFF;
				}

				.active {
					color: #ff9c27;
					border-bottom: 2px solid #ff9c27;
				}
			}

			.contentBox {
				padding-top: 38upx;

				.tabContent {
					display: flex;
					flex-direction: column;
					align-items: stretch;

					.row {
						display: flex;
						flex-direction: row;
						align-items: center;
						height: 98upx;
						border-radius: 10upx;
						border: solid 1upx #dedede;
						padding: 0 16upx;
						margin-top: 28upx;

						text {
							font-size: 26upx;
							color: #9c9c9c;
						}

						.iconfont {
							font-size: 28upx;
							line-height: 24upx;
							margin-left: 6upx;
						}

						.getCode {
							font-size: 26upx;
							color: #ed5614;
							text-align: right;
							flex-grow: 1;
						}

						.isSend {
							color: #9c9c9c;

						}

						.talInput {
							font-size: 26upx;
							color: #9c9c9c;
							width: 50%;
							margin-left: 10upx;
						}

						.msgCode {
							font-size: 26upx;
							color: #9c9c9c;
							padding-left: 10upx;
							width: 100%;
						}
					}

					.tishi {
						margin-top: 12upx;
						font-size: 22upx;
						color: #959595;
					}

					.forgetPass {
						color: #ffcd11;
					}

					.loginBtn {
						width: 100%;
						height: 88upx;
						color: #FFFFFF;
						line-height: 88upx;
						background-image: linear-gradient(0deg,
							#f6b423 0%,
							#fbdc2e 100%),
							linear-gradient(#f7bd26,
							#f7bd26);
						background-blend-mode: normal,
							normal;
						box-shadow: 0rpx 4upx 13upx 1upx rgba(255, 181, 51, 0.5);
						border-radius: 44upx;
						border: none;
						margin-top: 100upx;
					}

					.loginBtn:after {
						border: none;
					}
				}
			}
		}
	}

	.otherBox {
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;

		.xieyiBox {
			margin-bottom: 52upx;
			text-align: center;

			text {
				font-size: 22upx;
				color: #777777;
			}

			.zz {
				color: #ffcd11;
			}
		}

		.otherLogin {
			display: flex;
			justify-content: center;
			margin-bottom: 8.7%;

			image {
				margin: 0 37upx;
				width: 84upx;
				height: 84upx;
			}
		}
	}
</style>
